<template>
  <div class="layout-main">
    <img class="layout-banner" src="../assets/images/bg1.jpg" alt="" />
    <h3>产品列表</h3>
    <div class="product-list">
      <div v-for="item in 6" class="product-list--item">
        <img src="../assets/images/product-01.jpg" />
        <p>产品{{ item }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({});
</script>
<style lang="scss" scoped>
.layout-main {
  width: 100%;
}

h3 {
  margin-top: 70px;
  font-size: 34px;
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}

.product-list {
  margin-left: 100px;
  width: calc(100% - 200px);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3列，每列等宽 */
  gap: 30px; /* 可选，设置网格项之间的间距 */

  .product-list--item {
    border: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 0;
    img {
      width: 370px;
      height: 280px;
    }

    p {
      margin-top: 20px;
      width: 370px;
      text-align: center;
      line-height: 14px;
      font-size: 14px;
      color: #b2b2b2;
    }
  }
}
</style>
